<template>
  <div class="evaAssign">
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="实践课" name="practice">
          <el-table
            :data="tableData"
            :row-key="getRowKeys"
            :expand-row-keys="expands"
            @expand-change="exChange"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <!-- 内置显示发布的问卷 -->
                <div class="conent_list">
                  <div class="card_s publish_r" v-for="(item, index) in allPracticeData">
                    <el-card class="box-card" >
                      <div slot="header" class="clearfix">
                        <p>问卷:  {{item.model_cm_id}}</p>
                        <i v-bind:title="item.model_cm_name">{{item.model_cm_name}}</i>
                      </div>
                      <div class="text item">
                        <p>客观题数量:  {{item.model_cm_op_count}}</p>
                        <p>主观题数量:  {{item.model_cm_ob_count}}</p>
                      </div>
                      <div class="bottom clearfix">
                        <el-button style="float: left; padding: 3px 0" type="primary" @click="viewBtn(item.model_cm_id,item.model_cm_name,item.commentDetailList)">查看</el-button>
                        <el-button style="float: left; padding: 3px 0" type="success" @click="enableNaire(item.model_cm_id)" v-if="item.issue_flage != 1">启用</el-button>
                        <!-- <el-button style="float: left; padding: 3px 0" type="success" @click="enaDownload(item.course_type,item.school_id)" v-if="item.issue_flage == 1">下载</el-button> -->
                      </div>
                    </el-card>
                    <div class="p_t" v-if="item.issue_flage == 1">
                      <span>已启用</span>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="期数"
              prop="cg_periods">
            </el-table-column>
            <el-table-column
              label="学期名"
              prop="cg_name">
            </el-table-column>
            <el-table-column
              label="开班时间"
              :formatter="dateFormat"
              prop="cg_start_time">
            </el-table-column>
            <el-table-column
              label="结束时间"
              :formatter="dateFormat"
              prop="cg_end_time">
            </el-table-column>
          </el-table>
          
        </el-tab-pane>
        <!-- 理论课 -->
        <el-tab-pane label="理论课" name="theory">
          <el-table
            :data="tableData"
            :row-key="getRowKeys"
            :expand-row-keys="expands"
            @expand-change="exChange"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="conent_list">
                  <div class="card_s publish_r" v-for="(item, index) in allTheoryData">
                    <el-card class="box-card">
                      <div slot="header" class="clearfix">
                        <p>问卷:  {{item.model_cm_id}}</p>
                        <i v-bind:title="item.model_cm_name">{{item.model_cm_name}}</i>
                      </div>
                      <div class="text item">
                        <p>客观题数量:  {{item.model_cm_op_count}}</p>
                        <p>主观题数量:  {{item.model_cm_ob_count}}</p>
                      </div>
                      <div class="bottom clearfix">
                        <el-button style="float: left; padding: 3px 0" type="primary" @click="viewBtn(item.model_cm_id,item.model_cm_name,item.commentDetailList)">查看</el-button>
                        <el-button style="float: left; padding: 3px 0" type="success" @click="enableNaire(item.model_cm_id)" v-if="item.issue_flage != 1">启用</el-button>
                        <!-- <el-button style="float: left; padding: 3px 0" type="success" @click="enaDownload(item.course_type,item.school_id)" v-if="item.issue_flage == 1">下载</el-button> -->
                      </div>
                    </el-card>
                    <div class="p_t" v-if="item.issue_flage == 1">
                      <span>已启用</span>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="期数"
              prop="cg_periods">
            </el-table-column>
            <el-table-column
              label="学期名"
              prop="cg_name">
            </el-table-column>
            <el-table-column
              label="开班时间"
              :formatter="dateFormat"
              prop="cg_start_time">
            </el-table-column>
            <el-table-column
              label="结束时间"
              :formatter="dateFormat"
              prop="cg_end_time">
            </el-table-column>
          </el-table>
          
        </el-tab-pane>

       <!-- 调查问卷 -->
       <el-tab-pane label="调查问卷" name="actice">
          <el-table
            :data="tableData"
            :row-key="getRowKeys"
            :expand-row-keys="expands"
            @expand-change="exChange"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="conent_list">
                  <div class="card_s publish_r" v-for="(item, index) in allQuestionnairesData">
                    <el-card class="box-card">
                      <div slot="header" class="clearfix">
                        <p>问卷:  {{item.model_cm_id}}</p>
                        <i v-bind:title="item.model_cm_name">{{item.model_cm_name}}</i>
                      </div>
                      <div class="text item">
                        <p>客观题数量:  {{item.model_cm_op_count}}</p>
                        <p>主观题数量:  {{item.model_cm_ob_count}}</p>
                      </div>
                      <div class="bottom clearfix">
                        <el-button style="float: left; padding: 3px 0" type="primary" @click="viewBtn(item.model_cm_id,item.model_cm_name,item.commentDetailList)">查看</el-button>
                        <el-button style="float: left; padding: 3px 0" type="success" @click="enableNaire(item.model_cm_id)" v-if="item.issue_flage != 1">启用</el-button>
                       <!-- <el-button style="float: left; padding: 3px 0" type="success" @click="enaDownload(item.course_type,item.school_id)" v-if="item.issue_flage == 1">下载</el-button>  -->
                      </div>
                    </el-card>
                    <div class="p_t" v-if="item.issue_flage == 1">
                      <span>已启用</span>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="期数"
              prop="cg_periods">
            </el-table-column>
            <el-table-column
              label="学期名"
              prop="cg_name">
            </el-table-column>
            <el-table-column
              label="开班时间"
              :formatter="dateFormat"
              prop="cg_start_time">
            </el-table-column>
            <el-table-column
              label="结束时间"
              :formatter="dateFormat"
              prop="cg_end_time">
            </el-table-column>
          </el-table>
          
        </el-tab-pane>





      </el-tabs>
        
    </el-card>
    <!-- 查看 -->
    <el-dialog :title="naireTitle" :visible.sync="viewDialogVisible">
      <div class="topic_con" v-for="(item,index) in detail_cm_data" :key="index">
        <span><b v-if="item.question_null == 1">*</b>{{item.question_id}}、{{item.question_describe}}</span>
        <div class="topic_opt">
          <el-radio disabled label="1" v-if="item.question_type == 2">{{item.option_1}}</el-radio>
          <el-radio disabled label="2" v-if="item.question_type == 2">{{item.option_2}}</el-radio>
          <el-radio disabled label="3" v-if="item.question_type == 2">{{item.option_3}}</el-radio>
          <el-radio disabled label="4" v-if="item.question_type == 2">{{item.option_4}}</el-radio>
          <el-radio disabled label="5" v-if="item.question_type == 2">{{item.option_5}}</el-radio>
        </div>
      </div>
    </el-dialog>
    <!-- 选择启用的模板 -->
    <!-- <el-dialog :title="naireTitle" :visible.sync="pubDialogVisible" width="540px" :close-on-click-modal="false" :before-close="resetForm">
        <el-form :model="formPub" ref="formPubRef" :rules="rulesPub">
          <el-form-item label="选择期数:" prop="school_id" :label-width="formLabelWidth" required>
            <el-select v-model="formPub.school_id" placeholder="请选择期数" style="width:100%;">
              <el-option
                v-for="(item, index) in opt_school_id"
                :key="index"
                :label="item.cg_periods"
                :value="item.school_ids">
              </el-option>
            </el-select>
          </el-form-item>
          
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="save_publish()">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
  import course from '@/api/course';
  import evaluate from '@/api/evaluate';
  import { SERVER_BASE, http } from "@/api/config";
  export default {
    name: "evaAssign",
    data(){
      return{
        activeName: 'practice',
        practiceClassId: 1,
        allPracticeData: '', //查询已发布所有实践课问卷
        viewDialogVisible: false,
        detail_cm_data: '',
        naireTitle: '', //问卷标题
        allTheoryData: '', //查询所有理论课问卷
        allQuestionnairesData: '', //查询所有理论课问卷
        formPub: {
          school_id: '', // 学期id
          model_cm_id: '', // 模板id
          course_type: '', // 理论课还是实践课
          issue_flage: 0 // 是否启用,默认是0不启用
        },
        naireTitle: '', //问卷标题
        tableData: [],
        // 要展开的行，数值的元素是row的key值
        expands: [],
        school_ids: '', //暂存学期ID
      }
    },
    mounted(){
      // this.getAllPublished();
      this.getAllSchool();
    },
    methods: {
      //格式化时间戳
      dateFormat(row, column, cellValue, index){
        var row_time = row[column.property];
        let d = new Date(row_time);
        let y = d.getFullYear(); // 年份
        let m = (d.getMonth() + 1).toString().padStart(2,'0'); // 月份
        let r = d.getDate().toString().padStart(2,'0'); // 日子
        return `${y}-${m}-${r}`;// es6 字符串模板   
      },
      formatDate(date){
        let d = new Date(date);
        let y = d.getFullYear(); // 年份
        let m = (d.getMonth() + 1).toString().padStart(2,'0'); // 月份
        let r = d.getDate().toString().padStart(2,'0'); // 日子
        return `${y}.${m}.${r}`;// es6 字符串模板
      },
      // 获取所有期数
      getAllSchool() {
        course.getALLSchool().then(response => {
          if (response.data.code == '200') {
            // 参数拼接，得到想要的数据格式
            var list_len = response.data.data.list.length;
            var start_temp = response.data.data.list[0].cg_start_time;
            for (var i = 0; i < list_len; i++) {
              var temp_start_time = response.data.data.list[i].cg_start_time;
              var temp_end_time = response.data.data.list[i].cg_end_time;
              var school_id = response.data.data.list[i].school_id;
              var start_time = this.formatDate(temp_start_time);
              var end_time = this.formatDate(temp_end_time);
              var start_end = response.data.data.list[i].cg_periods + '(' + start_time + '-' + end_time + ')';
            }
            this.tableData = response.data.data.list
          } else {
            this.$message.warning("期数获取失败!")
          }
        })
      },
      // 切换面包屑
      handleClick() {
        if (this.activeName == 'practice') {
          this.practiceClassId = 1;
          this.expands = []
        } else if(this.activeName == 'theory') {
          this.practiceClassId = 2;
          this.expands = []
        }else if (this.activeName == 'actice'){
          this.practiceClassId = 3;
          this.expands = []
        }
        // this.getAllPublished(this.practiceClassId);
      },
      // 获取所有问卷
      getAllPublished(param) {
        var ClassId = param.cm_type
        if (ClassId == 1) {
          evaluate.getAllPublished(param).then(response => {
            if (response.data.code == 200) {
              this.allPracticeData = response.data.data;
            } else {
              this.$message.warning("获取问卷失败,请重试!")
            }
          })
        }
        if (ClassId == 2) {
          evaluate.getAllPublished(param).then(response => {
            if (response.data.code == 200) {
              this.allTheoryData = response.data.data;
            } else {
              this.$message.warning("获取问卷失败,请重试!")
            }
          })
        }
        if (ClassId == 3) {
          evaluate.getAllPublished(param).then(response => {
            if (response.data.code == 200) {
              this.allQuestionnairesData = response.data.data;
            } else {
              this.$message.warning("获取问卷失败,请重试!")
            }
          })
        }
      },
      resetForm() {
        this.formPub = {
          model_cm_id: null,
          school_id: null,
          course_type: null,
          issue_flage: 0
        }
        this.$refs.formPubRef.resetFields();
      },
      //启用问卷按钮
      enableNaire(num) {
        this.$confirm('启用以后不可更改, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //点击确定之后,发送id到后台删除按钮进行删除
          this.formPub.model_cm_id = num;
          this.formPub.course_type = this.practiceClassId;
          this.formPub.issue_flage = 1;
          this.formPub.school_id = this.school_ids;
          let param_pub = {
            cm_type: this.practiceClassId,
            school_id: this.school_ids
          }
          evaluate.enableQuestionnaire(this.formPub).then(response => {
            if (response.data.code == 200) {
              this.$message.success('启用成功!');
              this.getAllPublished(param_pub);
            } else {
              this.$message.error(response.data.msg);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      // 打开查看页面
      viewBtn(num,title,data) {
        this.viewDialogVisible = true;
        this.naireTitle = '问卷' + num +':' + title;
        this.detail_cm_data = data;
      },
      //下载问卷结果
      enaDownload(course_type,school_id){
        console.log(school_id)
        school_id = this.school_ids
        console.log(this.school_ids)
        course_type = this.practiceClassId;
        console.log(SERVER_BASE + "/download?"+"course_type=" + course_type+ "&school_id=" + school_id)      
        location.replace(SERVER_BASE + "/download?"+"course_type=" + course_type+ "&school_id=" + school_id)
        
        evaluate.evaDownload(course_type,school_id).then(response => {

       })
      },
      // 获取row的key值
      getRowKeys(row) {
        return row.school_id;
      },
      // 展开与折叠行
      exChange(row,column) {
        this.school_ids = row.school_id;
        let param = {
          cm_type: this.practiceClassId,
          school_id: this.school_ids
        }
        this.getAllPublished(param);
        // 默认展开一行，否则select数据会出错，因为展开或关闭都会触发exchange事件
        if (column.length) {
          this.expands = []
          if (row) {
            this.expands.push(row.school_id)
          }
        } else {
          this.expands = [];
        }
      },
    },
  }
</script>

<style scoped>
.publish_r{
  position:relative;
  background: #ccc;
  overflow: hidden;
}
.publish_r .p_t{
  width:90px;
  height:90px;
  position: absolute;
  background: #67C23A;
  top:-50px;
  right:-50px;
  transform: rotate(45deg);
  color:#fff;
}
.publish_r .p_t span{
  position: absolute;
  bottom:0;
  display: block;
  font-size: 14px;
  width:90px;
  text-align: center;
}
.text {
  font-size: 14px;
}
.conent_list {
  margin-left: -15px;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.clearfix p {
  font-weight: 700;
}
.clearfix i {
  font-size: 14px;
  color: #1E90FF;
  width: 180px;
  cursor: pointer;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box-card {
  width: 220px;
  background-color: #E6E6FA;
}

.card_s {
  display: block;
  float: left;
  margin-left: 15px;
  margin-top: 15px;
}

.topic_con {
  text-align: left;
  margin-left: 15px;
  padding-top: 15px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style>
.el-tabs__content {
  height: 600px;
  overflow-y: scroll;
  white-space: nowrap;
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
/*.el-tabs--top {
  height: 440px;
  overflow-y: scroll;
}
.el-dialog .el-dialog__body{
  display: flex;
  justify-content: center;
  align-items: center;
}*/
</style>